<template>
  <div class="goverLeft">
    <!-- 受理显示 -->
    <dv-border-box-1 class="leftTop">
      <dv-decoration-11
        style="width: 150px; height: 50px; margin: 15px 0 10px 10px"
        >正在受理</dv-decoration-11
      >
      <div class="leftContent">
        <div class="text">
          <span
            >正在受理
            <span style="color: #ffff40; font-size: 35px">37</span> 人</span
          >
          <span
            >前方等待
            <span style="color: #ffff40; font-size: 35px">211</span> 人</span
          >
        </div>
        <div class="person">
          <img
            v-for="i in 3"
            :key="i"
            src="../../../assets/img/government/personActive.png"
          />
          <img
            v-for="j in 18"
            :key="j"
            src="../../../assets/img/government/person.png"
          />
        </div>
        <div class="percent"></div>
      </div>
    </dv-border-box-1>
    <!-- 实时受理 -->
    <dv-border-box-9 class="leftBottom">
      <dv-decoration-11
        style="width: 150px; height: 50px; margin: 10px 0 10px 10px"
        >实时受理</dv-decoration-11
      >
      <div class="buttonContent">
        <!-- 今日取号 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>今日取号</span>
          </div>
          <div class="item-num">
            <span class="num">954</span>
            <span>人次</span>
          </div>
        </div>
        <!-- 今日受理 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>今日受理</span>
          </div>
          <div class="item-num">
            <span class="num">697</span>
            <span>人次</span>
          </div>
        </div>
        <!-- 正在受理 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>正在受理</span>
          </div>
          <div class="item-num">
            <span class="num">37</span>
            <span>人次</span>
          </div>
        </div>
        <!-- 前方等待 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>前方等待</span>
          </div>
          <div class="item-num">
            <span class="num">221</span>
            <span>人次</span>
          </div>
        </div>
        <!-- 新成立公司 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>新成立公司</span>
          </div>
          <div class="item-num">
            <span class="num">954</span>
            <span>家</span>
          </div>
        </div>
        <!-- 证照联办 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>证照联办</span>
          </div>
          <div class="item-num">
            <span class="num">14</span>
            <span>件</span>
          </div>
        </div>
        <!-- 医保社保 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>医保社保</span>
          </div>
          <div class="item-num">
            <span class="num">120</span>
            <span>人次</span>
          </div>
        </div>
        <!-- 交管违章处理 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>交管违章处理</span>
          </div>
          <div class="item-num">
            <span class="num">50</span>
            <span>件</span>
          </div>
        </div>
        <!-- 不动产交易 -->
        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>不动产交易</span>
          </div>
          <div class="item-num">
            <span class="num">25</span>
            <span>件</span>
          </div>
        </div>

        <div class="item">
          <div class="item-text">
            <img src="../../../assets/img/government/eidt.png" width="30px" />
            <span>市民卡</span>
          </div>
          <div class="item-num">
            <span class="num">107</span>
            <span>件</span>
          </div>
        </div>
      </div>
    </dv-border-box-9>
  </div>
</template>

<script>
export default {
  name: "goverLeft",
};
</script>

<style lang="scss" scoped>
.goverLeft {
  flex: 25%;
}
.leftTop {
  color: #bdffff;
  display: flex;
  padding-top: 10px;
  height: 330px;
  width: 400px;
  .text {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
  }
  .person {
    margin: 20px auto;
    width: 85%;
  }
}
.leftBottom {
  color: #bdffff;
  margin-top: 50px;
  height: 550px;
  // 组织margin塌陷
  overflow: hidden;
  .buttonContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 450px;
    width: 100%;
    padding-top: 10px;
    .item {
      width: 320px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-text {
        display: flex;
        flex: 45%;
        align-items: center;
        span {
          margin-left: 10px;
        }
      }
      .item-num {
        display: flex;
        align-items: center;
        flex: 55%;
        .num {
          text-align: center;
          height: 25px;
          width: 120px;
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          line-height: 25px;
          background-color: #0d17d1;
        }
        span {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
